import { Button, Divider } from 'antd'
import './style.scss'
import React, { useCallback, useState } from 'react'
import type { FC } from 'react'
import AuthTable from './ui/AuthTable'
import MyDialog from '@/components/MyDialog'
import AuthForm from './ui/AuthForm'
import { useNodeList } from '@/hooks/useAuth'

const Auth: FC = () => {
  const [isVisiable, setIsVisiable] = useState(false)
  const changeVisiable = useCallback((show: boolean) => {
    setIsVisiable(show)
    // 刷新列表数据
  }, [])
  // 数据列表
  const authData = useNodeList()

  return (
    <>
      <div className="auth-box">
        <Button type="primary" onClick={() => setIsVisiable(true)}>
          添加新节点
        </Button>
        <Divider />
        <AuthTable data={authData} />
      </div>
      {/* 弹出层 */}
      <MyDialog
        title="新增权限节点信息"
        isVisiable={isVisiable}
        changeVisiable={changeVisiable}
      >
        <AuthForm changeVisiable={changeVisiable} />
      </MyDialog>
    </>
  )
}

export default Auth
